<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('项目风险管理系统')">
    <!-- 通用头部将替换此内容 -->
</head>
<body class="bg-light">
    <div class="container py-5">
        <header class="mb-5">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h1 class="display-4 fw-bold text-primary">项目风险管理系统</h1>
                    <p class="lead text-muted">帮助项目团队识别、分析、跟踪和应对项目中的各种风险</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <div sec:authorize="isAuthenticated()" class="d-flex justify-content-lg-end align-items-center">
                        <span class="badge bg-light text-dark border p-2 me-3">
                            <i class="fas fa-user me-1"></i>
                            <span sec:authentication="name"></span>
                        </span>
                        <a th:href="@{/logout}" class="btn btn-outline-danger">
                            <i class="fas fa-sign-out-alt me-1"></i> 退出
                        </a>
                    </div>
                    <div sec:authorize="!isAuthenticated()" class="d-flex justify-content-lg-end mt-3 mt-lg-0">
                        <a th:href="@{/login}" class="btn btn-primary me-2">
                            <i class="fas fa-sign-in-alt me-1"></i> 登录
                        </a>
                        <a th:href="@{/register}" class="btn btn-outline-primary">
                            <i class="fas fa-user-plus me-1"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>
        
        <div class="row mb-4">
            <div class="col">
                <div class="alert alert-info border-0 shadow-sm" role="alert">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle fa-2x me-3"></i>
                        </div>
                        <div>
                            <h4 class="alert-heading">欢迎使用项目风险管理系统</h4>
                            <p class="mb-0">这是一个帮助您管理项目风险的工具，通过识别、分析和应对风险，提高项目成功率。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 风险概览仪表盘 (仅登录用户可见) -->
        <div class="row mb-5" sec:authorize="isAuthenticated()">
            <div class="col-12">
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-tachometer-alt text-primary me-2"></i>风险概览仪表盘
                        </h5>
                        <a th:href="@{/risk/list}" class="btn btn-sm btn-primary">
                            查看详情 <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                    <div class="card-body p-4">
                        <!-- 风险统计卡片 -->
                        <div class="row mb-5">
                            <div class="col-md-3 mb-4 mb-md-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body d-flex align-items-center p-4">
                                        <div class="stats-icon bg-light-primary rounded-circle me-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-list-ul fa-lg text-primary"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-muted mb-1">总风险数</h6>
                                            <h2 class="mb-0 fw-bold" th:text="${totalRisks != null ? totalRisks : 0}">0</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-4 mb-md-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body d-flex align-items-center p-4">
                                        <div class="stats-icon bg-light-warning rounded-circle me-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-exclamation-triangle fa-lg text-warning"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-muted mb-1">开放风险</h6>
                                            <h2 class="mb-0 fw-bold" th:text="${openRisks != null ? openRisks : 0}">0</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-4 mb-md-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body d-flex align-items-center p-4">
                                        <div class="stats-icon bg-light-success rounded-circle me-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-check-circle fa-lg text-success"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-muted mb-1">已解决</h6>
                                            <h2 class="mb-0 fw-bold" th:text="${resolvedRisks != null ? resolvedRisks : 0}">0</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body d-flex align-items-center p-4">
                                        <div class="stats-icon bg-light-danger rounded-circle me-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-bolt fa-lg text-danger"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-muted mb-1">高优先级</h6>
                                            <h2 class="mb-0 fw-bold" th:text="${highPriorityRisks != null ? highPriorityRisks : 0}">0</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 图表区域 -->
                        <div class="row">
                            <div class="col-md-6 mb-4 mb-md-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body">
                                        <h6 class="card-title text-muted mb-3">风险状态分布</h6>
                                        <div id="riskStatusChart" style="height: 320px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body">
                                        <h6 class="card-title text-muted mb-3">风险优先级分布</h6>
                                        <div id="riskTypeChart" style="height: 320px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 功能卡片 -->
        <div class="row mb-5" sec:authorize="isAuthenticated()">
            <div class="col-md-4 mb-4">
                <div class="card feature-card border-0 shadow-sm h-100">
                    <div class="card-body p-4 text-center">
                        <div class="icon-circle bg-primary text-white mx-auto mb-4 d-flex align-items-center justify-content-center">
                            <i class="fas fa-list-alt fa-2x"></i>
                        </div>
                        <h5 class="card-title mb-3">项目管理</h5>
                        <p class="card-text text-muted mb-4">创建和管理项目，查看项目详情和状态，跟踪项目进度。</p>
                        <a th:href="@{/project/list}" class="btn btn-primary w-100">
                            进入 <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card feature-card border-0 shadow-sm h-100">
                    <div class="card-body p-4 text-center">
                        <div class="icon-circle bg-warning text-white mx-auto mb-4 d-flex align-items-center justify-content-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                        <h5 class="card-title mb-3">风险管理</h5>
                        <p class="card-text text-muted mb-4">识别、评估和跟踪项目中的风险，制定风险应对策略。</p>
                        <a th:href="@{/risk/list}" class="btn btn-warning w-100 text-white">
                            进入 <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card feature-card border-0 shadow-sm h-100">
                    <div class="card-body p-4 text-center">
                        <div class="icon-circle bg-success text-white mx-auto mb-4 d-flex align-items-center justify-content-center">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                        <h5 class="card-title mb-3">团队管理</h5>
                        <p class="card-text text-muted mb-4">管理项目团队成员和他们的角色，分配责任和权限。</p>
                        <a th:href="@{/project/list}" class="btn btn-success w-100">
                            进入 <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row" sec:authorize="!isAuthenticated()">
            <div class="col">
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="card-body p-5 text-center">
                        <i class="fas fa-lock fa-3x text-primary mb-4"></i>
                        <h2 class="mb-3">请登录以使用系统</h2>
                        <p class="lead text-muted mb-4">登录后您可以管理项目、风险和团队成员，充分利用系统功能。</p>
                        <a th:href="@{/login}" class="btn btn-lg btn-primary px-5">
                            <i class="fas fa-sign-in-alt me-2"></i> 立即登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer class="footer mt-auto py-4 bg-dark text-white">
        <div class="container text-center">
            <span>© 2025 项目风险管理系统 | 版本 1.0</span>
        </div>
    </footer>
    
    <!-- 仅引入echarts，其他资源通过head.html引入 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    
    <!-- 图表初始化脚本 -->
    <script th:inline="javascript">
        $(function() {
            // 只有在用户登录时初始化图表
            if ($('#riskStatusChart').length > 0 && $('#riskTypeChart').length > 0) {
                // 初始化风险状态图表
                var riskStatusChart = echarts.init(document.getElementById('riskStatusChart'));
                var riskStatusOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        data: ['开放', '已解决', '已关闭', '延迟']
                    },
                    color: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e'],
                    series: [
                        {
                            name: '风险状态',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: [[${openRisks != null ? openRisks : 0}]], name: '开放'},
                                {value: [[${resolvedRisks != null ? resolvedRisks : 0}]], name: '已解决'},
                                {value: 0, name: '已关闭'},
                                {value: 0, name: '延迟'}
                            ]
                        }
                    ]
                };
                riskStatusChart.setOption(riskStatusOption);
                
                // 初始化风险类型图表
                var riskTypeChart = echarts.init(document.getElementById('riskTypeChart'));
                var riskTypeOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        data: ['高', '中', '低']
                    },
                    color: ['#e74a3b', '#f6c23e', '#36b9cc'],
                    series: [
                        {
                            name: '风险优先级',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: [[${highPriorityRisks != null ? highPriorityRisks : 0}]], name: '高'},
                                {value: [[${mediumPriorityRisks != null ? mediumPriorityRisks : 0}]], name: '中'},
                                {value: [[${lowPriorityRisks != null ? lowPriorityRisks : 0}]], name: '低'}
                            ]
                        }
                    ]
                };
                riskTypeChart.setOption(riskTypeOption);
                
                // 响应式调整
                window.addEventListener('resize', function() {
                    riskStatusChart.resize();
                    riskTypeChart.resize();
                });
            }
        });
    </script>
</body>
</html> 